<template>
	<view class="shop-detail">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">
			</view>
			<view class="title-block">
				<image :src="leftIcon" @tap="leftClick" class="left-img"></image>
			</view>
		</view>
		<swiper-show :bannerList='product.sub_images' type='1'></swiper-show>
		<!--底部选择层-->
		<!-- <view @click="selectSukid">选择规格</view> -->
		<specificationsnew @submitSukid="update"
			v-if="JSON.stringify(goodsInfo) != '{}' && JSON.stringify(gspecList) != '{}'" :goodsInfo="goodsInfo"
			:gspecList="gspecList" 
			:product="product" ref="mychild"
			 ></specificationsnew>

		<view class="content">
			<info :infoData='product' :type="type" :endTime='endTime' @timeEnd='timeEndChange'></info>
			<view style="padding: 0 24rpx;">
				<specification   @hintPopupClick='hintPopupClick'></specification>
				<reception ref="receptionRef" :type='type'></reception>
				<hint-block @hintClick='hintClick'></hint-block>
			</view>

			<detail-block :detailBlockData='product.detail'></detail-block>

			<commend @itemClick='cartClick'></commend>
			
		</view>

		<view class="fixed-block" v-if="type==0||type==1">
			<view class="left-item-option">
				<view class="item">
					<button class="icon center" open-type="contact">
						<image :src="kefu" class="auto-img"></image>
					</button>
					<view class="name">
						客服
					</view>
				</view>

				<view class="item" style="margin: 0 40rpx;" @tap="pageClick('/pages/tabbar/cart/cart')">
					<view class="icon  ">
						<image :src="cartIcon" class="auto-img"></image>
					</view>
					<view class="name">
						购物车
					</view>
				</view>

				<view class="item" @tap="pageClick('/pages/tabbar/index/index')">
					<view class="icon">
						<image :src="homeIcon" class="auto-img"></image>
					</view>
					<view class="name">
						首页
					</view>
				</view>

			</view>
			<view class="right-item-option">
				<view class="txt1" v-if="type==0" @click="selectSukid()">加入购物车</view>
				<view class="txt2"  @tap="selectSukid" v-if="type==0||type==1">立即购买</view>
			</view>
		</view>
		<view v-if="type==2" class="fixed-block" style="		background: linear-gradient(135.25deg, #ffcf01 0%, #ffbf00 100%);">
			<view class="txt" @tap="selectSukid" v-if="type==2">积分兑换</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			 <view class="hint-popup-class">
				 <view class="hint-title">配送方式</view>
				 <view class="hint-item">
					 <image src="@/static/cart/peiso.png" class="left-img"></image>
					 <!-- <view class="left-img"></view> -->
					<view class="right-content">
						<view class="one-txt">支持同城限时达</view>
						<view class="two-txt">现在下单预计最快25分钟内送达</view>
					</view>
				 </view>
			 </view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import swiperShow from '@/pages/shopDetail/components/swiperShow.vue'
	import reception from '@/pages/shopDetail/components/reception.vue'
	import detailBlock from '@/pages/shopDetail/components/detailBlock.vue'
	import commend from '@/pages/tabbar/cart/components/commend.vue'
	import hintBlock from '@/pages/shopDetail/components/hintBlock.vue'
	import specification from '@/pages/shopDetail/components/specification.vue'
	import info from '@/pages/shopDetail/components/info.vue'
	import specificationsnew from '@/components/specificationsnew/specificationsnew.vue';
	export default {
		components: {
			swiperShow,
			reception,
			detailBlock,
			commend,
			hintBlock,
			specification,
			info,
			specificationsnew,
		},
		data() {
			return {
				leftIcon: require('@/static/detail/leftIcon.png'),
				homeIcon: require('@/static/detail/homeIcon.png'),
				cartIcon: require('@/static/detail/cartIcon.png'),
				kefu: require('@/static/detail/kefu.png'),
				statusBarHeight: 20,
				goodsId: '',
				product: '',
				gspecList: {}, //商品sku信息
				goodsInfo: {}, //商品详情
				productSpecsS: [],
				commodityData: {}, //商品数据
				type: 0, //0是普通商品 1是抢购商品 2是积分购买
				endTime: '',
				receptionObj: {},
			}
		},
		onLoad(options) {
			

			uni.setStorageSync("seckill_id",options.seckill_id)
			
			if (options) {
				this.goodsId = options.goodsId
				this.init()
				//orderType 0是普通商品 1是抢购类型 2是积分兑换
				uni.setStorageSync('orderType', 0)
				if (options.endTime) {
					uni.setStorageSync('orderType', 1)
					this.type = 1
					this.endTime = options.endTime
				}
				if (options.type) {
					uni.setStorageSync('orderType', 2)
					this.type = options.type
				}
			}
		},
		onShow() {
			uni.removeStorageSync('couponObj')
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
		},
		methods: {
			/**
			 * 父元素接受子元素（规格）
			 *
			 */
			update: function(e) {
				console.log(e);
			},
			leftClick() {
				uni.navigateBack()
			},
			buyClick() {
				uni.navigateTo({
					url: '/pages/submit/submit'
				})
			},
			pageClick(url) {
				uni.switchTab({
					url
				})
			},
			hintClick() {
				this.pageClick('/pages/tabbar/index/index')
			},
			hintPopupClick(){
					this.openPopup()
			},
			init() {
				this.$http('goods.getCommoditySpecs', {
					token: this.$tools.getToken(),
					commodityID: this.goodsId
				}).then(res => {

					if (res.code == 200) {
						var commoditySpecs = res.data.commoditySpecs
						var commodityData = res.data.commodity
						this.productSpecsS = commoditySpecs
						this.commodityData = commodityData;
						this.product = commodityData;
						this.commodityData.sub_images = JSON.parse(commodityData.sub_images)
						if (commodityData.detail == null || commodityData.detail == undefined ||
							commodityData.detail == "null") {
							this.commodityData.detail = {
								"text": "",
								"imgs": []
							}
						} else {
							this.commodityData.detail = JSON.parse(commodityData.detail)
						}
						this.getlist();
					} else {
						setTimeout(res => {
							uni.navigateBack()
						}, 500)
						this.$tools.showMsg(res.msg)
					}
				})
			},
			openPopup() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			closePopup(){
				this.$refs.popup.close()
			},
			/**
			 * 模拟获取商品详情，以及商品规格信息
			 *
			 */
			getlist: function() {
				var products = [];
				var spec_infos = [];
				var spec_value_id = 0;
				//遍历，转换数据格式
				// console.log(this.productSpecsS);
				for (let productSpecs of this.productSpecsS) {
					var product_specs = JSON.parse(productSpecs.product_specs);
					var product = {
						specs: '',
						id: 0,
						stock: 0,
						title: '',
						price: ''
					};
					product.specs = '';
					product.id = productSpecs.id;
					product.title = JSON.stringify(product_specs);
					product.price = productSpecs.product_price / 100;
					product.stock = productSpecs.product_stock + "";
					product.type = this.type
					if (this.type == 1) {
						product.endTime = this.endTime
					}
					//遍历规格属性键 属性值
					for (let key in product_specs) {
						//添加数据，去除重复数据
						//判断是否可以添加键
						var isk = true;
						var j = 0;
						for (var i = 0; i < spec_infos.length; i++) {
							var spec_name = spec_infos[i].spec_name;
							if (key == spec_name) {
								j = i;
								isk = false;
							}
						}
						if (isk) {
							//可以添加键
							var spec_info = {
								spec_name: '',
								value: [{
									spec_value_name: product_specs[key],
									spec_value_id: spec_value_id
								}]
							};
							//添加单个规格对应id
							if (product.specs == '') {
								product.specs = product.specs + spec_value_id;
							} else {
								product.specs = product.specs + '_' + spec_value_id;
							}
							spec_value_id++;
							spec_info.spec_name = key;
							spec_infos.push(spec_info);
						} else {
							//已经存在键，添加值
							if (spec_infos[j] != undefined) {
								var values = spec_infos[j].value;

								console.log(product_specs[key]);
								//判断是否可以添加值
								var isv = true;
								for (let value of values) {
									if (product_specs[key] == value.spec_value_name) {
										//添加单个规格对应id
										if (product.specs == '') {
											product.specs = product.specs + value.spec_value_id;
										} else {
											product.specs = product.specs + '_' + value.spec_value_id;
										}
										isv = false;
									}
								}
								if (isv) {
									var value = {

										spec_value_name: product_specs[key],
										spec_value_id: spec_value_id
									};
									//添加单个规格对应id
									if (product.specs == '') {
										product.specs = product.specs + spec_value_id;
									} else {
										product.specs = product.specs + '_' + spec_value_id;
									}
									spec_value_id++;
									spec_infos[j].value.push(value);
								}
							}
						}
					}

					products.push(product);
				}

				this.gspecList = {
					goods_spec: products,
					spec_info_list: spec_infos
				};
				this.goodsInfo = {
					thumb: this.commodityData.sub_images[0],
					stock: '',
					price: this.commodityData.price / 100
				};
				this.getNews()
				this.$forceUpdate()
			},
			/**
			 * 显示规格弹窗
			 */
			selectSukid: function() {
				if (JSON.stringify(this.goodsInfo) != '{}' && JSON.stringify(this.gspecList) != '{}') {
					this.$refs.mychild.setOrderType(this.type)
					this.$refs.mychild.toggleSpec();
				} else {
					uni.showToast({
						title: '请稍后再试',
						mask: false,
						duration: 1500
					});
				}
			},
			getNews() {
				this.$http('goods.getEvaluates', {
					token: this.$tools.getToken(),
					commodity_id: this.product.id,
					page:0,
					type:2
				}).then(res => {
					if (res.code == 200) {
						// this.receptionObj = {
						// 	count: res.data.count,
						// 	...res.data.evaluate,
						// 	id: this.product.id,
						// }
						
						this.receptionObj = []
						var  code = res.code
						if(code==200){
							this.commImgCount = res.data.commImgCount;
							var evaluates = res.data.evaluates;
							for (let var1 in evaluates) {
								evaluates[var1].imgs = JSON.parse(evaluates[var1].imgs)
								this.receptionObj.push(evaluates[var1]);
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none"
							})
						}
						
						
						
						
						
						
						this.$refs.receptionRef.init(this.receptionObj)
					}
				})
			},
			timeEndChange() {
				// this.getlist()
			},
			cartClick(id) {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + id
				})
			},
		}
	}
</script>
<style>
	page {
		background: #FAFAF5FF;

	}
</style>
<style lang="scss" scoped>
	.title-page {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;

		.uni-status-bar {
			height: 20px;
		}

		.title-block {
			font-size: 32rpx;
			font-weight: 500;
			height: 80rpx;
			color: rgba(0, 0, 0, 1);
			display: flex;
			align-items: center;

			.left-img {
				margin-left: 24rpx;
				width: 50rpx;
				height: 50rpx;

			}
		}
	}

	.fixed-block {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 112rpx;
		background-color: #fff;
		border-top: 1px solid #fafafa;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-around;
		color: #fff;
		.left-item-option {

			flex: auto;
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			width: 300rpx;
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 80rpx;

				.icon {
					width: 38rpx;
					height: 40rpx;

				}

				.name {
					margin-top: 8rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		.right-item-option {

			display: flex;
			align-items: center;
			flex: none;
			justify-content: space-between;

			.txt1 {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(27, 25, 25, 1);
				background: linear-gradient(135.25deg, #ffcf01 0%, #ffbf00 100%);
				width: 180rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-top-left-radius: 60rpx;
				border-bottom-left-radius: 60rpx;
			}
			.txt2 {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(27, 25, 25, 1);
				background-color: #e20000;
				width: 180rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-top-right-radius: 60rpx;
				border-bottom-right-radius: 60rpx;
			}
		}

	}

	.content {
		padding-bottom: 120rpx;
	}
	
	.hint-popup-class{
		height: 600rpx;
		background: #fff;
		border-top-right-radius:32rpx;
		border-top-left-radius:32rpx;
		.hint-title{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 32rpx;
			font-size: 28rpx;
		}
		.hint-item{
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			.left-img{
				margin-left: 24rpx;
				width: 78rpx;
				height: 78rpx;
				flex: none;
			 
			}
			.right-content{
				flex:auto;
				margin-left: 24rpx;
				font-size: 26rpx;
				.one-txt{
					padding-bottom: 16rpx;
				}
				.two-txt{
					color:#ABABAB;
				}
			}
		}
	}
</style>
